﻿@model dynamic
@*<button data-id="addEmployee" class="button">Add Employee</button>*@
<div id="employeesGrid" class="slickgrid">
</div>
<button id="addEmployeeButton" class="button">Add Employee</button>
<div class="hidden">
    <div id="addEmployeeDialog" title="Add Employee">
        <form id="addEmployeeForm">
        <label for="FirstName">First Name:</label><input type="text" name="FirstName" />
        <label for="MiddleName">Middle Name:</label><input type="text" name="MiddleName" />
        <label for="LastName">Last Name:</label><input type="text" name="LastName" />
        <label for="PhoneNumber">Phone Number:</label><input type="text" name="PhoneNumber" />
        <label for="EmailAddress">Email Address:</label><input type="text" name="EmailAddress" />
        <label for="Address">Address:</label><input type="text" name="Address" />
        <label for="City">City:</label><input type="text" name="City" />
        <label for="State">State:</label>
        <select id="State" name="State">
            <option value="" selected="selected">Select a State</option>
            <option value="AL">Alabama</option>
            <option value="AK">Alaska</option>
            <option value="AZ">Arizona</option>
            <option value="AR">Arkansas</option>
            <option value="CA">California</option>
            <option value="CO">Colorado</option>
            <option value="CT">Connecticut</option>
            <option value="DE">Delaware</option>
            <option value="DC">District Of Columbia</option>
            <option value="FL">Florida</option>
            <option value="GA">Georgia</option>
            <option value="HI">Hawaii</option>
            <option value="ID">Idaho</option>
            <option value="IL">Illinois</option>
            <option value="IN">Indiana</option>
            <option value="IA">Iowa</option>
            <option value="KS">Kansas</option>
            <option value="KY">Kentucky</option>
            <option value="LA">Louisiana</option>
            <option value="ME">Maine</option>
            <option value="MD">Maryland</option>
            <option value="MA">Massachusetts</option>
            <option value="MI">Michigan</option>
            <option value="MN">Minnesota</option>
            <option value="MS">Mississippi</option>
            <option value="MO">Missouri</option>
            <option value="MT">Montana</option>
            <option value="NE">Nebraska</option>
            <option value="NV">Nevada</option>
            <option value="NH">New Hampshire</option>
            <option value="NJ">New Jersey</option>
            <option value="NM">New Mexico</option>
            <option value="NY">New York</option>
            <option value="NC">North Carolina</option>
            <option value="ND">North Dakota</option>
            <option value="OH">Ohio</option>
            <option value="OK">Oklahoma</option>
            <option value="OR">Oregon</option>
            <option value="PA">Pennsylvania</option>
            <option value="RI">Rhode Island</option>
            <option value="SC">South Carolina</option>
            <option value="SD">South Dakota</option>
            <option value="TN">Tennessee</option>
            <option value="TX">Texas</option>
            <option value="UT">Utah</option>
            <option value="VT">Vermont</option>
            <option value="VA">Virginia</option>
            <option value="WA">Washington</option>
            <option value="WV">West Virginia</option>
            <option value="WI">Wisconsin</option>
            <option value="WY">Wyoming</option>
        </select>
        <label for="Zip">Zip:</label><input type="text" name="Zip" />
        <label for="BirthDate">Birth Date:</label><input type="text" class="datepicker" name="BirthDate" readonly="readonly" />
        <label for="Username">Username:</label><input type="text" name="Username" />
        <label for="Password">Password:</label><input type="text" name="Password" />
        <label for="Role">Role:</label><select name="Role">
            <option>Employee</option>
            <option>Manager</option>
        </select>
        </form>
    </div>
    <div id="editEmployeeDialog" title="Edit Employee">
        <form id="editEmployeeForm">
            <input type="hidden" name="Id" />
            <label for="FirstName">First Name:</label><input type="text" name="FirstName" />
            <label for="MiddleName">Middle Name:</label><input type="text" name="MiddleName" />
            <label for="LastName">Last Name:</label><input type="text" name="LastName" />
            <label for="PhoneNumber">Phone Number:</label><input type="text" name="PhoneNumber" />
            <label for="EmailAddress">Email Address:</label><input type="text" name="EmailAddress" />
            <label for="Address">Address:</label><input type="text" name="Address" />
            <label for="City">City:</label><input type="text" name="City" id="City" />
            <label for="State">State:</label>
            <select id="State" name="State">
                <option value="" selected="selected">Select a State</option>
                <option value="AL">Alabama</option>
                <option value="AK">Alaska</option>
                <option value="AZ">Arizona</option>
                <option value="AR">Arkansas</option>
                <option value="CA">California</option>
                <option value="CO">Colorado</option>
                <option value="CT">Connecticut</option>
                <option value="DE">Delaware</option>
                <option value="DC">District Of Columbia</option>
                <option value="FL">Florida</option>
                <option value="GA">Georgia</option>
                <option value="HI">Hawaii</option>
                <option value="ID">Idaho</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Louisiana</option>
                <option value="ME">Maine</option>
                <option value="MD">Maryland</option>
                <option value="MA">Massachusetts</option>
                <option value="MI">Michigan</option>
                <option value="MN">Minnesota</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="MT">Montana</option>
                <option value="NE">Nebraska</option>
                <option value="NV">Nevada</option>
                <option value="NH">New Hampshire</option>
                <option value="NJ">New Jersey</option>
                <option value="NM">New Mexico</option>
                <option value="NY">New York</option>
                <option value="NC">North Carolina</option>
                <option value="ND">North Dakota</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="OR">Oregon</option>
                <option value="PA">Pennsylvania</option>
                <option value="RI">Rhode Island</option>
                <option value="SC">South Carolina</option>
                <option value="SD">South Dakota</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="UT">Utah</option>
                <option value="VT">Vermont</option>
                <option value="VA">Virginia</option>
                <option value="WA">Washington</option>
                <option value="WV">West Virginia</option>
                <option value="WI">Wisconsin</option>
                <option value="WY">Wyoming</option>
            </select>
            <label for="Zip">Zip:</label><input type="text" name="Zip" />
            <label for="BirthDate">Birth Date:</label><input type="text" class="datepicker" name="BirthDate" readonly="readonly" />
            <label for="Username">Username:</label><input type="text" name="Username" />
            <label for="Password">Password:</label><input type="text" name="Password" />
            <label for="Role">Role:</label><select name="Role">
                                               <option>Employee</option>
                                               <option>Manager</option>
                                           </select>
        </form>
    </div>
    <div id="availabilityDialog" title="Employee Availability">
        <form id="availabilityForm">
        <label for="Monday">Monday:</label><input type="text" name="Monday" id="Monday" />
        <label for="Tuesday">Tuesday:</label><input type="text" name="Tuesday" id="Tuesday" />
        <label for="Wednesday">Wednesday:</label><input type="text" name="Wednesday" id="Wednesday" />
        <label for="Thursday">Thursday:</label><input type="text" name="Thursday" id="Thursday" />
        <label for="Friday">Friday:</label><input type="text" name="Friday" id="Friday" />
        <label for="Saturday">Saturday:</label><input type="text" name="Saturday" id="Saturday" />
        <label for="Sunday">Sunday:</label><input type="text" name="Sunday" id="Sunday" />
        </form>
    </div>
    <div id="timePicker" title="Pick Time:">
        <form>
        <label for="From">From:</label><input type="text" name="From">
        <label for="To">To:</label><input type="text" name="To">
        </form>
    </div>
    <div id="deleteEmployeeDialog" title="Delete Employee">
        Are you sure you want to delete <span id="employeeName" class="warning"></span>?
    </div>
</div>
@section styles {
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/jquery.tagsinput.css")" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/jquery.ui.timepicker.css")" />
    <link href="@Url.Content("~/Content/css/employeemanagement.css")" rel="stylesheet" type="text/css" />
}
@section scripts {
    <script src="@Url.Content("~/Scripts/jquery.tagsinput.js")"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.timepicker.js")"></script>
    <script src="@Url.Content("~/js/employeemanagement.js")"></script>
}
